<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">

	<h:head>
		<title>Globallogic vacation planner 1.0</title>
		<style>
/* a { */
/* 	text-decoration: none; */
/* } */
</style>
		<link rel="stylesheet" type="text/css" href="css/container.css" />
		<link rel="stylesheet" type="text/css" href="css/userPage.css" />
	</h:head>

	<h:body bgcolor="silver">
		<div class="container">
			<center>
				<h2>User page</h2>

				<div class="poster">
					<a> <img src="images/defaultUser.png" width="160px"
						height="160px" />
					</a>
					<p>
						<a href="editProfile.xhtml">edit profile</a>
					</p>
				</div>
				<div class="about">
					<font color="blue">
						<p>Name: #{userBean.userName}</p>
						<p>Surname: #{userBean.surname}</p>
						<p>Email: #{userBean.email}</p>
					</font>

				</div>
				<div class="links">

					<p align="left">
						<h:form>
							<a href="userPage.xhtml">Home___|___</a>
							<a href="vacation.xhtml">Vacations___|___</a>
							<a href="projects.xhtml">Projects___|___</a>
							<h:commandLink value="Log out" action="#{userBean.logout}" />
						</h:form>
					</p>
				</div>

				<div class="table">
					<h:form>
						<rich:panel header="Own Projects" style="width:700px;">
							<rich:extendedDataTable id="dataTable"
								value="#{projectBean.fillTableUserOwnProjects()}" var="dataItem"
								style="width:652px; height:200px" rowKeyVar="row">
								<f:facet name="header">
									<h:outputText value="Projects list" />
								</f:facet>
								<rich:column headerClass="dataTableHeader" width="100px"
									colspan="3">
									<f:facet name="header">Project Name</f:facet>
									<h:outputText value="#{dataItem.name}">
									</h:outputText>
								</rich:column>
								<rich:column headerClass="dataTableHeader" width="100px">
									<f:facet name="header">Cretor</f:facet>
									<h:outputText value="#{dataItem.loginCreator}">
									</h:outputText>
								</rich:column>
								<rich:column headerClass="dataTableHeader" width="200px">
									<f:facet name="header">Description</f:facet>
									<h:outputText value="#{dataItem.description}" />
								</rich:column>
								<rich:column headerClass="dataTableHeader" width="100px">
									<f:facet name="header">State</f:facet>
									<h:outputText value="#{dataItem.state}" />
								</rich:column>
								<rich:column headerClass="dataTableHeader" width="140px">
									<f:facet name="header">Action</f:facet>
									<h:form>
										<a4j:commandButton
											action="#{projectBean.showEditProjectPage}"
											value="Edit project" style="height: 20px; width: 140px" />
									</h:form>
								</rich:column>
							</rich:extendedDataTable>
						</rich:panel>
						<!-- 						Membered Projects -->
						<br />
						<rich:panel header="Membered Projects" style="width:700px;">
							<rich:extendedDataTable
								value="#{projectBean.fillTableUserMemberdProjects()}"
								var="dataItem" style="width:652px; height:200px" rowKeyVar="row">
								<f:facet name="header">
									<h:outputText value="Projects list" />
								</f:facet>
								<rich:column headerClass="dataTableHeader" width="100px"
									colspan="3">
									<f:facet name="header">Project Name</f:facet>
									<h:outputText value="#{dataItem.name}">
									</h:outputText>
								</rich:column>
								<rich:column headerClass="dataTableHeader" width="100px">
									<f:facet name="header">Cretor</f:facet>
									<h:outputText value="#{dataItem.loginCreator}">
									</h:outputText>
								</rich:column>
								<rich:column headerClass="dataTableHeader" width="200px">
									<f:facet name="header">Description</f:facet>
									<h:outputText value="#{dataItem.description}" />
								</rich:column>
								<rich:column headerClass="dataTableHeader" width="100px">
									<f:facet name="header">State</f:facet>
									<h:outputText value="#{dataItem.state}" />
								</rich:column>
								<rich:column headerClass="dataTableHeader" width="140px">
									<f:facet name="header">Action</f:facet>
									<h:form>
										<a4j:commandButton action="#{projectBean.leaveTheProject}"
											value="Leave the project" style="height: 20px; width: 150px">
											<f:setPropertyActionListener value="#{row}"
												target="#{projectBean.projectIndex}" />
										</a4j:commandButton>
									</h:form>
								</rich:column>
							</rich:extendedDataTable>
						</rich:panel>
					</h:form>
					<br /> <a href="createProject.xhtml">Create new project</a>
				</div>
			</center>

		</div>
	</h:body>
</ui:composition>